<template>
  <div class="help-model">
    <div class="help-icon" @click="isShow = true"></div>
    <div v-transfer-dom>
      <x-dialog v-model="isShow" hide-on-blur class="info-dialog">
        <div class="slot">
          <div class="title">
            <i></i>
            <span>说明</span>
          </div>
          <slot></slot>
        </div>
      </x-dialog>
    </div>
  </div>
</template>

<script>
  import {
    XDialog,
    TransferDom
  } from 'vux'
  export default {
    directives: {
      TransferDom
    },
    components: {
      XDialog
    },
    props: {
      showHelp: {
        type: Boolean,
        default: false
      }
    },
    data() {
      return {
        isShow: this.showHelp
      }
    },
  }
</script>

<style lang="scss" scoped>
  .help-icon {
    width: 18px;
    height: 18px;
    background: url(/static/info.svg) no-repeat;
    background-size: contain;
    
  }
</style>

<style lang="scss">
  .slot {
    text-align: left;
    padding: 12px;
    .title {
      i {
        display: inline-block;
        vertical-align: middle;
        width: 18px;
        height: 18px;
        background: url(/static/info.svg) no-repeat 50%;
        background-size: contain;
      }
      span {
        vertical-align: middle;
        color: $green;
        font-size: 18px;
      }
    }
    p {
      font-size: 12px;
      line-height: 1.4;
      color: #333;
    }
  }
  .info-dialog {
    .weui-dialog {
      border-radius: 10px;
    }
  }
  .help-model {
    position: absolute;
    right: 15px;
    top: 15px;
    
    // z-index: -1;
  }
</style>

